<template>
  <div class="block-container violation-table">
    <div class="block-title">{{ props.title }}</div>
    <a-table
      :columns="columns"
      :data-source="props.renderList"
      class="table-container"
      :pagination="false"
    >
      <template #headerCell="{ column }">
        <template v-if="column.key === 'name'">
          <span>
            <!-- <smile-outlined /> -->
            姓名
          </span>
        </template>
      </template>

      <!-- 个性化单元格 -->
      <template #bodyCell="{ text, column }">
        <!-- 出勤类型 -->
        <template v-if="column.key === 'attendanceType' && text === 3">
          <a-tag color="red">迟到</a-tag>
        </template>
        <template v-if="column.key === 'attendanceType' && text === 4">
          <a-tag color="red">早退</a-tag>
        </template>
        <!-- 部门 -->
        <template v-if="column.key === 'staffDepartment'">
          <a-tag>{{ text ? text : "暂无部门信息" }}</a-tag>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance } from "@vue/runtime-core";
import { color } from "echarts";
import { storeToRefs } from "pinia";
import { formatDate } from "../../../utils/format";

interface PropsTypes {
  title: string;
  renderList: [];
}
const props = withDefaults(defineProps<PropsTypes>(), {
  title: "",
  renderList: []
});
console.log(props, "table-props");

const columns = [
  {
    name: "姓名",
    dataIndex: "staffName",
    key: "name",
    width: 80,

    align: "center"
  },
  {
    title: "考勤时间",
    dataIndex: "createTime",
    key: "age",
    minWidth: "200",
    align: "center",
    customRender: ({ text }) => {
      return formatDate(text, "YYYY-MM-DD HH:mm:ss");
    }
  },
  {
    title: "考勤类型",
    dataIndex: "attendanceType",
    key: "attendanceType",
    width: 100,
    align: "center"
  },
  {
    title: "部门",
    dataIndex: "staffDepartment",
    key: "staffDepartment",
    width: 150,
    align: "center"
  }
];
</script>

<style lang="less" scoped>
.violation-table {
  width: 98%;
  .table-container {
    width: 100%;
    height: 280px;
    padding-top: 10px;
  }
}
</style>
